<template>
  <div class="module-container">
    <ModuleHeader
      title="信贷周期"
      subtitle="Credit Cycle"
    />

    <div class="charts-grid">
      <!-- 左侧图表：银行间流动性 -->
      <CreditCycleChart
        :series="[creditCycleData.interbankLiquidity, creditCycleData.interbankLiquidityTrend]"
        :height="300"
        :y-axis-range="[0, 0.8]"
      />

      <!-- 右侧图表：信贷指标 -->
      <CreditCycleChart
        :series="[creditCycleData.cycleIndicator, creditCycleData.creditImpulse, creditCycleData.creditChange]"
        :height="300"
        :y-axis-range="[-15, 25]"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useCreditCycleData } from '../hooks/useCreditCycleData'
import CreditCycleChart from './CreditCycleChart.vue'
import ModuleHeader from '../common/ModuleHeader.vue'

const { creditCycleData } = useCreditCycleData()
</script>

<style scoped>
.module-container {
  @apply bg-white rounded-[4px] shadow-sm mb-6 overflow-hidden;
  border: 1px solid #D4D8E5;
}

.charts-grid {
  @apply grid grid-cols-1 lg:grid-cols-2 gap-6 p-6;
}
</style>
